<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
    <style type="text/css">
      .container {
        width: 100%;
        height: 100%;
      }
      .ball {
        --delay: 0s;
        --duration: 1s;
        --move: 200px;
        width: 50px;
        height: 50px;
        background: red;
        border-radius: 50%;
        margin: 100px;
        animation: move var(--duration) var(--delay) linear forwards paused;
      }

      @keyframes move {
        0% {
          transform: translate(0) scale(1);
        }

        50% {
          transform: translate(100px) scale(2);
        }

        100% {
          transform: translate(200px) scale(1);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="ball"></div>
      <input
        type="range"
        min="0"
        max="1"
        value="0"
        step="0.01"
        class="slider"
      />
    </div>

    <script>
      const input = document.querySelector('.slider');

      const ball = document.querySelector('.ball');
      const resetDelay = (value) => {
        ball.style.setProperty('--delay', `-${value}s`);
      };

      input.oninput = (evt) => {
        resetDelay(evt.target.value);
      };
      resetDelay(0);
    </script>
  </body>
</html>
